<template>
  <view class="driver-detail-container">
    <view class="driver-info-box">
      <view class="info-left">
		<view class="info-name">
			{{ userInfo.Name || '' }}
			<score-tag :score="userInfo.Score"></score-tag>
		</view>
		<view class="info-company">
			{{ CompanyName || '' }}
		</view>
		<view class="info-phone">
			联系方式：{{ userInfo.Phone || '' }}
		</view>
	  </view>
      <view class="info-right">
        <image v-if="!face" src="../../static/img/default-img.png" mode="widthFix"></image>
		<image v-if="face" :src="face" mode="widthFix"></image>
      </view>
    </view>
	<view class="info-view__block">
	 <view class="block-row">
	    <view class="block-row__label">当前状态</view>
	    <view class="block-row__val">{{userInfo.Cph ? `已绑定(${userInfo.Cph})`:'休息中'}}</view>
	  </view>
	</view>
	
	<view class="info-view__block">
	  <view class="block-row">
	    <view class="block-row__label">性别</view>
	    <view class="block-row__val">{{userInfo.Sex == 0 ? '男' : '女'}}</view>
	  </view>
	  <view class="block-row">
	    <view class="block-row__label">年龄</view>
	    <view class="block-row__val">{{age}}</view>
	  </view>
	  <view class="block-row">
	    <view class="block-row__label">实名认证</view>
	    <view class="block-row__val">{{userInfo.CardId !='' ? '已实名' : '未实名'}}</view>
	  </view>
	  <view class="block-row">
	    <view class="block-row__label">身份证正反面</view>
	    <view class="block-row__val __blue" @tap="getImgSrc('idCards')">查看 <view class="iconfont icon-right __icon"></view></view>
	  </view>
	  <view class="block-row">
	    <view class="block-row__label">身份证号</view>
	    <view class="block-row__val">{{userInfo.CardId}}</view>
	  </view>
	</view>
	
	<view class="info-view__block">
	  <view class="block-row">
	    <view class="block-row__label">驾驶证</view>
	    <view class="block-row__val __blue" @tap="getImgSrc('driverCards')">查看 <view class="iconfont icon-right __icon"></view></view>
	  </view>
	  <view class="block-row">
	    <view class="block-row__label">准驾车型</view>
	    <view class="block-row__val">{{carListObj[userInfo.DriverType]}}</view>
	  </view>
	</view>
	
	<view class="info-view__block">
	  <view class="block-row">
	    <view class="block-row__label">从业证</view>
	    <view class="block-row__val __blue" @tap="getImgSrc('otherCards')">查看 <view class="iconfont icon-right __icon"></view></view>
	  </view>
	  <view class="block-row">
	    <view class="block-row__label">从业证号</view>
	    <view class="block-row__val">{{userInfo.Cert}}</view>
	  </view>
	  <view class="block-row">
	    <view class="block-row__label">从业证核发地</view>
	    <view class="block-row__val">{{userInfo.CertIssued}}</view>
	  </view>
	  <view class="block-row">
	    <view class="block-row__label">从业证有效期</view>
	    <view class="block-row__val">{{userInfo.CertExpire}}</view>
	  </view>
	</view>
	</view>
  </view>
</template>

<script>
	import ScoreTag from '@/components/score-tag/score-tag.vue'
  export default {
    data() {
      return {
        token: '',
		CompanyName: '',
		userId: -1,
		face: null,
		age: 0,
		userInfo: {},
		cardList: {}
      }
    },
	computed: {
		carListObj(){
		  return this.$config.carListObj
		}
	},
	components: {
		ScoreTag
	},
	onLoad (e) {
    // 页面pv事件埋点
    this.$aplus.aplus_queue.push({
      'action':'aplus.sendPV',
      'arguments':[{
        is_auto: false
      }, {
        sapp_id:'19344',//isv根据实际填写自己应用的参数
        sapp_name:'zhongdianchelian',//isv根据实际填写自己应用的参数
        // 自定义PV参数key-value键值对，以下内容必填，根据应用实际情况设置。
        page_id: 'driverDetail',//isv根据实际填写自己应用的参数
        page_name: '驾驶员信息',//isv根据实际填写自己应用的参数
        page_url: 'pages/driverDetail/driverDetail'//isv根据实际填写自己应用的参数
      }]
    })
		this.CompanyName = e.CompanyName
		this.userId = e.userId
		uni.showLoading({
			title: this.userId
		})
	},
	mounted() {
		uni.getStorage({
			key: 'token',
			success: (res) => {
				this.token = res.data
				this.init()
			}
		})
	},
	methods: {
		init () {
			this.getUserFace(this.userId)
			this.getUserInfo(this.userId)
		},
		getImgSrc(type){
		  uni.previewImage({
		    urls: this.cardList[type], 
		    success: function(res) {},
		    fail: function(res) {},
		    complete: function(res) {},
		  })
		},
		getAge(cardId){
		  const age = new Date().getFullYear() - cardId.substr(6,4)
		  return age
		},
		getUserInfo(userId){
		  uni.showLoading()
		  this.$http.get('Muck/getStaffInfoByPolice',{
		    Token:this.token,
		    StaffId:userId
		  })
		  .then(res=>{
		    this.userInfo = res.result
		    this.age = this.getAge(this.userInfo.CardId)
		    
		    this.cardList.idCards = [this.userInfo.CardIdImg1,this.userInfo.CardIdImg2]
		    this.cardList.driverCards = [this.userInfo.DriverImg1,this.userInfo.DriverImg2]
		    this.cardList.otherCards = [this.userInfo.CertImg]
		    uni.hideLoading()
		  })
		  .catch(err=>{
		    const msg = err.result || err
		    uni.showToast({
		      title:'获取信息失败,'+msg,
		      icon:'none'
		    })
		  })
		},
		getUserFace(userId){
		  this.$http.get('Muck/getStaffFace',{
		    Token:this.token,
		    StaffId:userId
		  }).then(res=>{
		    this.face = res.result.Face
		  }).catch(err=>{
		    uni.showToast({
		      title:'人脸获取失败,'+err.result,
		      icon:'none'
		    })
		  })
		},
	}
  }
</script>

<style lang="scss">
.driver-detail-container{
  .driver-info-box{
	  padding: 16rpx 32rpx 32rpx 32rpx;
	  display: flex;
	  .info-left {
		  flex: 1;
		.info-name {
			display: flex;
			font-size: 32rpx;
			font-weight: 600;
		}
		.info-company {
			margin-top: 16rpx;
			color: #6C6C6C;
		}
		.info-phone {
			margin-top: 16rpx;
		}
	  }
	  .info-right {
		  image {
			  width: 160rpx;
			  border-radius: 50%;
		  }
	  }
  }
  .info-view__block{
    margin-top: 20rpx;
    background-color: #fff;
    
    .block-row{
      width: 100%;
      padding: 0 32rpx;
      box-sizing: border-box;
      height: 110rpx;
      display: flex;
      justify-content: space-between;
      align-items: center;
      border-bottom:1px solid #e6e6e6;
	  // border-bottom:1px solid $app-color-separated;
      
      .block-row__label{
        font-size: 32rpx;
        color: #666666;
      }
      .block-row__val{
        font-size: 32rpx;
        color: #333;
        display: flex;
        align-items: center;
        &.__red{
          color:red;
        }
        &.__blue{
          color:blue;
        }
        .__icon{
          font-size: 24rpx;
          margin-left: 12rpx;
          color:#999;
        }
      }
    }
  }
}
</style>
